<template>
	<view class="salary-list">
		<view class="nav-top">
			<view class="per-inform">
				<person-infrom :propName='personSalar.psnname' :propNum='personSalar.psncode'
					:propDepartment='personSalar.deptname'></person-infrom>
				<view @click="choiceTime"
					style="border: 1px solid #b9b9b9;border-radius: 5px;font-size: 24rpx;padding: 4rpx 6rpx;">
					<text>{{viewStartTime}}</text>
					<text>到</text>
					<text>{{viewEndTime}}</text>
				</view>
			</view>
		</view>
		<view class="table">
			<template v-if="salaryTable.length!=0">
				<salaryCard :salaryInform="item.children" :title="item.title" v-for="(item,index) in salaryTable"
					@handleClick="clickCell(item.children)" :key="index">
				</salaryCard>
			</template>
			<view v-if="salaryTable.length==0" class="empty-tips">暂无相关数据</view>
			<!-- <my-table textAlign="center" :tableContentProp='salaryTable' ref="heightChild" @handleClick='clickTable'></my-table> -->
		</view>
		<view class="statis">
			<view v-for="(key,value) in sendMoney" class="statis-sub">
				<view>{{key}}</view>
				<view>{{value}}</view>
			</view>
		</view>
		<itmister-date-picker :ishalf="false" :isdays="false" ref="datePicker" @dateConfirm="confirpicker">
		</itmister-date-picker>
		<sofar-picker :visable.sync="pickerVisable" :defaultDate="defaultDate" themeColor="#0055ff"
			@confirm="confirpicker">
		</sofar-picker>
	</view>
</template>

<script>
	import salaryCard from "./components/salaryCard.vue"
	import service from '../../../common/service/new_file.js'
	import apiData from '../../../common/utils/apiData.js'
	export default {
		data() {
			return {
				pickerVisable: false,
				defaultDate: [],
				choicedDate: '1',
				monthValue: '',
				yearValue: '',
				personSalar: {
					psnname: '1',
					psncode: '1',
					deptname: ''
				},
				sendMoney: {
					'应发合计': 0, //应发
					'扣款合计': 0, //扣款
					'实发合计': 0, //实发
				},
				viewStartTime: '',
				viewEndTime: '',
				salaryTable: []
			};
		},
		components: {
			salaryCard
		},
		methods: {
			getMonthBetween(start, end) {
				var result = [];
				var s = start.split("-");
				var e = end.split("-");
				var min = new Date();
				var max = new Date();
				min.setFullYear(s[0], s[1]);
				max.setFullYear(e[0], e[1]);
				var curr = min;
				while (curr <= max) {
					var month = curr.getMonth();
					//month=month==0?12:month;
					var str = curr.getFullYear() + "-" + (month);
					var s = curr.getFullYear() + "-0";
					if (str == s) {
						str = curr.getFullYear() + "-12";
					}
					result.push(str);
					curr.setMonth(month + 1);
				}
				return result;
			},

			// ___________________________时间选择——————————————————————————————————
			confirpicker(value) {
				let startTime = value[0]
				let endTime = value[1]
				//视图上
				this.viewStartTime = startTime
				this.viewEndTime = endTime
				//格式转换
				let times = this.getMonthBetween(startTime, endTime).map(item => {
					return {
						"cperiod": item.split('-')[1] < 10 ? '0' + item.split('-')[1] : item.split('-')[1],
						"cyear": item.split('-')[0]
					}
				})
				this.getSalaryData(times)
			},
			clickCell(item) {
				//点击子项cell
				uni.navigateTo({
					url: '../salaryDetails/salaryDetails?item=' + JSON.stringify(item)
				})
			},
			choiceTime() {
				this.pickerVisable = true
			},
			// ___________________________时间选择——————————————————————————————————
			getSalaryData(times) {
				let _this = this
				let date = times
				this.sendMoney = {
					'应发合计': 0, //应发
					'扣款合计': 0, //扣款
					'实发合计': 0, //实发
				}
				let data = apiData.setSalayList(date);

				function compare(property) {
					return function(a, b) {
						var value1 = a[property];
						var value2 = b[property];
						return value2 - value1;
					}
				}
				service.common(data, {
					success: (res) => {
						if (res.data.VALUES.length == 0) {
							uni.showToast({
								icon: "none",
								title: "暂无相关数据"
							})
						}
						let salaryList = []
						let newArr = res.data.VALUES
						let renderData = []

						function compare(property) {
							return function(b, a) {
								let value1 = a[property];
								let value2 = b[property];
								return value2 - value1;
							}
						}
						newArr.forEach(item => {
							let subArr = []
							for (let key in item) {
								//计算出总共的工资详情
								if (key.indexOf('应发合计') != -1) {
									_this.sendMoney['应发合计'] += Number(item[key])
								} else if (key.indexOf('实发合计') != -1) {
									_this.sendMoney['实发合计'] += Number(item[key])
								} else if (key.indexOf('扣款合计') != -1) {
									_this.sendMoney['扣款合计'] += Number(item[key])
								}

								//把&提取出来用于后面的排序
								let splKeyArr = key.split("&")
								subArr.push({
									label: splKeyArr[0],
									value: item[key],
									dep: splKeyArr[1] ? Number(splKeyArr[1]) : 0
								})
							}
							subArr.sort(compare("dep"))
							renderData.push({
								title: item['方案名称'],
								children: subArr
							})
						})
						this.salaryTable = renderData
						for (let key in this.sendMoney) {
							this.sendMoney[key] = this.sendMoney[key].toFixed(2)
						}
					},
					fail: (err) => {}
				})
			},
		},
		onReady() {
			// this.$refs.heightChild.getScrollHeight()
		},
		onPullDownRefresh() {
			this.viewStartTime = this.yearValue + '-' + this.monthValue
			this.viewEndTime = this.yearValue + '-' + this.monthValue
			this.getSalaryData([{
				"cperiod": this.monthValue,
				"cyear": this.yearValue
			}])
		},
		computed: {
			CPchoicedTime() {
				return this.yearValue + '-' + this.monthValue
			},
		},
		onLoad(options) {
			let nowDate = new Date
			this.defaultDate = [`${nowDate.getFullYear()}.1`, '至今']

			this.monthValue = nowDate.getMonth() + 1 < 10 ? '0' + nowDate.getMonth() : nowDate.getMonth()
			this.yearValue = nowDate.getFullYear().toString()
			let perSon = JSON.parse(uni.getStorageSync('user'))
			this.personSalar = {
				psnname: perSon.user_name,
				psncode: perSon.user_code,
				deptname: ''
			}
			this.viewStartTime = this.yearValue + '-' + this.monthValue
			this.viewEndTime = this.yearValue + '-' + this.monthValue
			this.getSalaryData([{
				"cperiod": this.monthValue,
				"cyear": this.yearValue
			}])
		},
	}
</script>

<style lang="scss" scoped>
	.empty-tips {
		text-align: center;
		padding-top: 100rpx;
		font-size: 30rpx;
		color: #c5c5c5;
		width: 100%;
	}

	.data-tip {
		text-align: center;
		color: #949494;
		font-size: 28rpx;
		margin-top: 50rpx;
	}

	.salary-list {
		.statis {
			width: 100%;
			position: fixed;
			bottom: 0;
			display: flex;
			color: #ffffff;
			background: $salary-color;
			justify-content: space-between;

			.statis-sub {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 20rpx;
			}
		}

		.nav-top {
			width: 100%;
			position: fixed;
			top: 0;
			background: #ffffff;
			border-bottom: 2rpx solid #e1e1e1;

			.per-inform {
				display: flex;
				justify-content: space-between;
				margin: 20rpx 30rpx;
			}
		}
	}

	.table {
		padding-top: 100rpx;
	}
</style>
